<template>
    <view class="icon-wrapper" :class="[`icon-${name}`, customClass]" :style="iconStyle">
        <!-- 火箭图标 -->
        <svg v-if="name === 'rocket'" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" />
            <path d="M12 16L8 20H16L12 16Z" />
        </svg>

        <!-- 邮箱图标 -->
        <svg v-else-if="name === 'email'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" />
        </svg>

        <!-- 锁图标 -->
        <svg v-else-if="name === 'lock'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M18 8H17V6C17 3.24 14.76 1 12 1S7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM12 17C10.9 17 10 16.1 10 15S10.9 13 12 13S14 13.9 14 15S13.1 17 12 17ZM15.1 8H8.9V6C8.9 4.29 10.29 2.9 12 2.9S15.1 4.29 15.1 6V8Z" />
        </svg>

        <!-- 用户图标 -->
        <svg v-else-if="name === 'user'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M12 12C14.21 12 16 10.21 16 8S14.21 4 12 4S8 5.79 8 8S9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" />
        </svg>

        <!-- 眼睛图标 -->
        <svg v-else-if="name === 'eye'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5S21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12S9.24 7 12 7S17 9.24 17 12S14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12S10.34 15 12 15S15 13.66 15 12S13.66 9 12 9Z" />
        </svg>

        <!-- 眼睛斜杠图标 -->
        <svg v-else-if="name === 'eye-slash'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M11.83 9L15 12.16C15 12.11 15 12.05 15 12C15 10.34 13.66 9 12 9C11.94 9 11.89 9 11.83 9ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.77 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8ZM2 4.27L4.28 6.55L4.73 7C3.08 8.3 1.78 10 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.81 19.09L19.73 22L21 20.73L3.27 3L2 4.27ZM12 7C13.66 7 15 8.34 15 12C15 12.18 14.99 12.36 14.97 12.53L19.94 17.5C21.24 16.25 22.29 14.61 23 12C21.27 7.61 17 4.5 12 4.5C10.6 4.5 9.26 4.75 8.04 5.21L10.17 7.34C10.76 7.13 11.37 7 12 7Z" />
        </svg>

        <!-- 微信图标 -->
        <svg v-else-if="name === 'wechat'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M8.5 12C9.33 12 10 11.33 10 10.5S9.33 9 8.5 9S7 9.67 7 10.5S7.67 12 8.5 12ZM15.5 9C14.67 9 14 9.67 14 10.5S14.67 12 15.5 12S17 11.33 17 10.5S16.33 9 15.5 9ZM12 2C6.48 2 2 6.48 2 12S6.48 22 12 22S22 17.52 22 12S17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4S20 7.59 20 12C20 16.41 16.41 20 12 20Z" />
        </svg>

        <!-- QQ图标 -->
        <svg v-else-if="name === 'qq'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M12 2C13.1 2 14 2.9 14 4V8C16.21 8 18 9.79 18 12V16C18 17.1 17.1 18 16 18H8C6.9 18 6 17.1 6 16V12C6 9.79 7.79 8 10 8V4C10 2.9 10.9 2 12 2ZM12 4V8H10C8.9 8 8 8.9 8 10V16H16V10C16 8.9 15.1 8 14 8H12V4Z" />
        </svg>

        <!-- Apple图标 -->
        <svg v-else-if="name === 'apple'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.1 22C7.79 22.05 6.8 20.68 5.96 19.47C4.25 17 2.94 12.45 4.7 9.39C5.57 7.87 7.13 6.91 8.82 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z" />
        </svg>

        <!-- 播放图标 -->
        <svg v-else-if="name === 'play'" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5V19L19 12L8 5Z" />
        </svg>

        <!-- 信号图标 -->
        <svg v-else-if="name === 'signal'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M2 17H4V24H2V17ZM5 14H7V24H5V14ZM8 19H10V24H8V19ZM11 16H13V24H11V16ZM14 13H16V24H14V13ZM17 10H19V24H17V10ZM20 7H22V24H20V7Z" />
        </svg>

        <!-- WiFi图标 -->
        <svg v-else-if="name === 'wifi'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M1 9L2 10C4.88 7.12 8.88 5.5 13 5.5S21.12 7.12 24 10L23 9C20.38 6.38 16.88 5 13 5S5.62 6.38 3 9L1 9ZM5 13L6 14C7.62 12.38 10.13 11.5 13 11.5S18.38 12.38 20 14L19 13C17.63 11.63 15.38 11 13 11S8.37 11.63 7 13L5 13ZM9 17L10 18C10.89 17.11 11.89 16.5 13 16.5S15.11 17.11 16 18L15 17C14.33 16.33 13.67 16 13 16S11.67 16.33 11 17L9 17ZM13 21L13 21Z" />
        </svg>

        <!-- 电池图标 -->
        <svg v-else-if="name === 'battery'" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M15.67 4H14V2H10V4H8.33C7.6 4 7 4.6 7 5.33V20.67C7 21.4 7.6 22 8.33 22H15.67C16.4 22 17 21.4 17 20.67V5.33C17 4.6 16.4 4 15.67 4Z" />
        </svg>

        <!-- 默认图标 -->
        <svg v-else viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22S22 17.52 22 12S17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" />
        </svg>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    name: string;
    size?: string | number;
    color?: string;
    customClass?: string;
}

const props = withDefaults(defineProps<Props>(), {
    size: '1em',
    color: 'currentColor',
    customClass: ''
});

const iconStyle = computed(() => ({
    width: typeof props.size === 'number' ? `${props.size}px` : props.size,
    height: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color
}));
</script>

<style lang="scss" scoped>
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }
}
</style>